<template>
	<view class="points-detail-container">
		<!-- 顶部导航栏 -->
	
		
		<!-- 积分筛选 -->
		<view class="filter-section">
			<view class="filter-item" :class="{active: activeFilter === 'all'}" @click="setFilter('all')">
				<text>全部</text>
			</view>
			<view class="filter-item" :class="{active: activeFilter === 'income'}" @click="setFilter('income')">
				<text>收入</text>
			</view>
			<view class="filter-item" :class="{active: activeFilter === 'expense'}" @click="setFilter('expense')">
				<text>支出</text>
			</view>
		</view>
		
		<!-- 积分记录列表 -->
		<scroll-view 
			scroll-y="true" 
			class="points-records"
			@scrolltolower="onScrollToLower"
			refresher-enabled
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="points-record-item" v-for="(record, index) in filteredRecords" :key="index">
				<view class="record-info">
					<view class="record-title">{{record.title}}</view>
					<view class="record-date">{{record.date}}</view>
				</view>
				<view class="record-points" :class="{'income': record.type === 'income', 'expense': record.type === 'expense'}">
					<text>{{record.type === 'income' ? '+' : '-'}}{{record.points}}</text>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="loading-more" v-if="loading && page > 1">
				<uni-icons type="spinner-cycle" size="20" color="#999999"></uni-icons>
				<text>加载中...</text>
			</view>
			
			<!-- 没有更多了 -->
			<view class="no-more" v-if="!loading && !hasMore && filteredRecords.length > 0">
				<text>没有更多了</text>
			</view>
			
			<!-- 空列表提示 -->
			<view class="empty-list" v-if="!loading && filteredRecords.length === 0">
				<image class="empty-image" src="/static/empty.png" mode="aspectFit"></image>
				<text>暂无积分记录</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeFilter: 'all',
			pointsRecords: [],
			loading: false,
			refreshing: false,
			page: 1,
			pageSize: 10,
			hasMore: true,
			totalCount: 0
		}
	},
	computed: {
		filteredRecords() {
			if (this.activeFilter === 'all') {
				return this.pointsRecords;
			} else {
				return this.pointsRecords.filter(record => record.type === this.activeFilter);
			}
		}
	},
	onLoad() {
		this.getPointsLogs();
	},
	methods: {
		navigateBack() {
			uni.navigateBack({
				delta: 1,
				fail: () => {
					// 如果返回失败，则跳转到积分中心页
					uni.switchTab({
						url: '/pages/points/index'
					});
				}
			});
		},
		setFilter(filter) {
			this.activeFilter = filter;
		},
		// 获取积分记录
		
		
		getPointsLogs() {
			if (this.loading) return;
			
			this.loading = true;
			
			if (this.page === 1 && !this.refreshing) {
				uni.showLoading({
					title: '加载中...'
				});
			}
			
			this.$boya.NGet("/app/points/logs", {
				page: this.page,
				page_size: this.pageSize
			}, (res) => {
				console.log('积分记录数据:', res);
				
				if (res.code === 200) {
					// 根据实际接口响应结构获取数据
					const records = res.data.data || [];
					
					// 格式化记录数据
					const formattedRecords = records.map(item => {
						// 确定积分类型，正值为收入
						const isIncome = Number(item.points) > 0;
						
						return {
							id: item.id,
							title: item.description || this.getLogTitle(item.type),
							date: item.created_at || '',
							points: Math.abs(Number(item.points)),
							type: isIncome ? 'income' : 'expense',
							raw: item // 保存原始数据，以备需要
						};
					});
					
					// 第一页直接替换，其他页追加
					if (this.page === 1) {
						this.pointsRecords = formattedRecords;
					} else {
						this.pointsRecords = [...this.pointsRecords, ...formattedRecords];
					}
					
					// 更新分页信息
					const lastPage = res.data.last_page || 1;
					this.hasMore = this.page < lastPage;
					this.totalCount = res.data.total || 0;
				} else {
					uni.showToast({
						title: res.msg || '获取积分记录失败',
						icon: 'none'
					});
				}
			}, (err) => {
				console.error('获取积分记录失败', err);
				uni.showToast({
					title: '网络错误，获取积分记录失败',
					icon: 'none'
				});
			}, {
				complete: () => {
					this.loading = false;
					this.refreshing = false;
					
					if (this.page === 1) {
						uni.hideLoading();
					}
				}
			});
		},
		
		// 根据类型获取日志标题
		getLogTitle(type) {
			const titleMap = {
				'sign_in': '每日签到奖励',
				'read': '阅读文章奖励',
				'share': '分享奖励',
				'invite': '邀请好友奖励',
				'exchange': '积分兑换',
				'task': '任务奖励'
			};
			
			return titleMap[type] || '积分变动';
		},
		
		// 下拉刷新
		onRefresh() {
			if (this.loading) return;
			
			this.refreshing = true;
			this.page = 1;
			this.hasMore = true;
			//this.getPointsLogs();
		},
		
		// 上拉加载更多
		onScrollToLower() {
			if (this.loading || !this.hasMore) return;
			
			this.page += 1;
			//this.getPointsLogs();
		}
	}
}
</script>

<style lang="scss" scoped>
.points-detail-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	
	.nav-bar {
		height: 90rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		background-color: #007AFF;
		color: #FFFFFF;
		position: relative;
		
		.back {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.title {
			position: absolute;
			left: 0;
			right: 0;
			text-align: center;
			font-size: 36rpx;
			font-weight: 500;
		}
	}
	
	.filter-section {
		display: flex;
		background-color: #FFFFFF;
		height: 100rpx;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1rpx solid #EEEEEE;
		
		.filter-item {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #666666;
			position: relative;
			
			&.active {
				color: #007AFF;
				font-weight: 500;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 6rpx;
					background-color: #007AFF;
					border-radius: 3rpx;
				}
			}
		}
	}
	
	.points-records {
		height: calc(100vh - 190rpx);
		
		.points-record-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			background-color: #FFFFFF;
			margin-top: 2rpx;
			
			.record-info {
				flex: 1;
				
				.record-title {
					font-size: 32rpx;
					color: #333333;
					margin-bottom: 10rpx;
				}
				
				.record-date {
					font-size: 24rpx;
					color: #999999;
				}
			}
			
			.record-points {
				font-size: 36rpx;
				font-weight: bold;
				
				&.income {
					color: #FF6B00;
				}
				
				&.expense {
					color: #007AFF;
				}
			}
		}
		
		.loading-more, .no-more, .empty-list {
			text-align: center;
			padding: 30rpx;
			color: #999999;
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		
		.loading-more {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			
			text {
				margin-left: 10rpx;
			}
		}
		
		.empty-list {
			padding-top: 200rpx;
			
			.empty-image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
				opacity: 0.5;
			}
		}
	}
}
</style> 
 